import Taro, { Component } from '@tarojs/taro'
import { AtInput, AtIcon } from 'taro-ui'
import classnames from 'classnames'
import PropsType from 'prop-types'
import { View, Image, Text } from '@tarojs/components'
import '../styles/inpute.scss'

export default class DAtInpute extends Component {

  onChange() {
    this.props.onChange && this.props.onChange(...arguments, this.props)
  }

  onFocus() {
    this.props.onFocus && this.props.onFocus(...arguments)
  }

  onBlur() {
    this.props.onBlur && this.props.onBlur(...arguments)
  }

  onErrorClick() {
    this.props.onErrorClick && this.props.onErrorClick(...arguments)
  }

  onClick() {
    this.props.onClick && this.props.onClick(...arguments)
  }

  onRightHanlde() {
    this.props.onRightHanlde && this.props.onRightHanlde(this.props)
  }


  render() {
    const {
      className,
      name,
      type,
      value,
      title,
      maxLength,
      disabled,
      placeholder,
      border,
      editable,
      error,
      clear,
      focus,
      icon,
      image,
      children,
      require,
      color,
      iconImg
    } = this.props
    return (
      <View className={classnames('b_inpute', className)}>
        {
          (!icon && !image) && <AtInput title={title}
            className={classnames('b_inpute__item', value ? 'b_inpute__value' : '', require ? 'b_inpute__status' : "")}
            maxLength={maxLength}
            disabled={disabled}
            name={name}
            border={border}
            type={type}
            value={value}
            placeholder={placeholder}
            editable={editable}
            error={error}
            clear={clear}
            focus={focus}
            onChange={this.onChange.bind(this)}
            onFocus={this.onFocus.bind(this)}
            onBlur={this.onBlur.bind(this)}
            onErrorClick={this.onErrorClick.bind(this)}
            onClick={this.onClick.bind(this)}
          >
            {children}
          </AtInput>
        }
        {
          (icon || image) && <View className='b_inpute__display'>
            {
              iconImg && <Image src={iconImg} className='b_inpute__display-iconImg'></Image>
            }
            {
              title && <View className={classnames('b_inpute__display_title', require ? 'b_inpute__requrire' : "")}>{title}</View>
            }
            {
              (value || placeholder) ? <View className='b_inpute__display_right' onClick={this.onRightHanlde.bind(this)}>
                <Text className={classnames('b_inpute__display_right__item', value ? 'b_inpute__display_right__value' : '')}>{value || placeholder}</Text>
              </View>
                : <View className='b_inpute__display_right' onClick={this.onRightHanlde.bind(this)}>
                  &nbsp;
                            </View>
            }
            {
              children && <Text className='b_inpute__display_children'>{children}</Text>
            }
          </View>
        }
        {
          ((icon !== 'none' && icon) || image) && <View className='b_inpute__icon' onClick={this.onRightHanlde.bind(this)}>
            {
              icon && <AtIcon value={icon} size='24' color={color}></AtIcon>
            }
            {
              image && <Image src={image} className='b_inpute__icon_image'></Image>
            }
          </View>
        }
      </View>
    )
  }
}

DAtInpute.defaultProps = {
  name: '',
  type: 'text',
  value: '',
  title: '',
  maxLength: 140,
  disabled: false,
  placeholder: '',
  border: true,
  editable: true,
  error: false,
  clear: false,
  focus: false,
  icon: '',
  image: '',
  require: false,
  color: '#CCCCCC',
  iconImg: '',
  onRightHanlde: () => { }
}
